<template>
  <div class="template1-room-wrap"
       :style="{height:height+'px'}"
       ref="outerWrap">
    <template1-header :class="{'active':headerShow}"></template1-header>
    <div class="video-box mode1-video-box"
         style="position: fixed;left: 0;right: 0;top:0;z-index: 13;"
         :style="{'height':videoWrapHeight+'px'}"
         ref="videoBoX">
      <mic-loading v-if="micLoading"
                   :index="micIndex"></mic-loading>
      <div id="fullscreen-player-wrap"
           :style="{'height':videoWrapHeight+'px'}"
           style="position: relative;" v-if="!playerLoading"></div>
      <div class="no-live"
           v-if="!roomLive && !playerLoading"
           @click="headerIsShow">
        <div class="no-live-innerwrap">
          <div>
						<img src="@/assets/images/mode1-no-live.png" alt="暂未直播" width="178" height="49" v-if="!is_official">
						<img src="@/assets/images/deticateIp/no-live.png" alt="暂未直播" width="120" height="77" v-else>
          </div>
          <p>休息中暂时没有直播</p>
        </div>
      </div>
      <player-loading v-if="playerLoading"></player-loading>
    </div>
    <div class="layout_main"
         :style="{'top':layoutTop+'px'}" :class="{'other':activeIndex >= 1}">
      <nav class="nav_box border-1px">
        <ul class="mobiletab"
            v-if="getTabLoading" ref="tabUl">
          <li class="first ell select"
              @click="swiperSlide"
              :class="{'li-length-2':tabLength === 2,'li-length-3':tabLength === 3,'li-length-n':tabLength > 3}"><a>直播间</a></li>
          <li class="first ell"
              @click="swiperSlide"
              :class="{'li-length-2':tabLength === 2,'li-length-3':tabLength === 3,'li-length-n':tabLength > 3}"><a class="siliao"
               :class="{'active':priTips}">私聊</a></li>
 					<li
						 @click="swiperSlide"
						 :class="{'li-length-3':tabLength === 3,'li-length-n':tabLength > 3}"  class="ell" v-if="voteObj"><a>投票</a></li>
					<li
						 @click="swiperSlide"
						 :class="{'li-length-3':tabLength === 3,'li-length-n':tabLength > 3}" v-if="roompara.replay_display" class="ell"><a>录像</a></li>
          <li v-for="(item,index) in roomTabs"
              :key="index"
              @click="swiperSlide"
              :class="{'li-length-3':tabLength === 3,'li-length-n':tabLength > 3}" class="ell"><a>{{item.tab_name}}</a></li>
        </ul>
        <div class="tv-loading-inner"
             v-else>
          <div class="ball-beat"
               style="margin-bottom: 0;">
            <div></div>
            <div></div>
            <div></div>
          </div>
        </div>
      </nav>
      <div :style="{fontSize: 14 + 'px' }"
           style="position:relative"
           ref="swipercontainer" class="swiper-outer-wrap">
        <div class="slide-inner-wrap move-in-left" style="overflow: hidden;">
          <div class="chat-scroll-wrap" @touchmove="touchMove" @touchstart="touchStart">
            <ul id="content_pub"
                style="font-size: 14px;"
                ref="pubChatWrap">
            </ul>
          </div>
					<div class="barrage-tip">
						有更多新的消息
					</div>
        </div>
        <div class="slide-inner-wrap"
             @touchmove="touchMove"
             @touchstart="touchStart" ref="privateChatWrap">
          <div>
						<div class="private-inline-list-wrap">
							<ul v-if="privateChatArray.length>0">
								<li class="tempalte1-private-chat-li border-1px" v-for="(item,index) in privateChatArray" :key="index" @click="popupPrivate(index)">
									<a href="javascript:;" class="tempalte1-private-chat-a" >
										<div class="private-metainfo-left userrand fl ell" style="max-width: 17.5rem;">
											<i v-if="item.level === 500" class="teacher"></i>
											<i v-else-if="item.level === 900" class="admin"></i>
											<i v-else-if="item.level === 2000" class="shi"></i>
											<i v-else-if="item.level === 4000" class="tuan"></i>
											<i v-else-if="item.appdata.title <= 12" :class="'rank'+item.appdata.title"></i>
											<i v-else-if="item.appdata.title > 12" class="rank12"></i>
											{{item.appdata.nickname}}
										</div>
										<div class="fr private-icon" :class="{'has-new-message':item.messageFlag}"></div>
									</a>
								</li>
							</ul>
							<div style="padding-top: 5px;color: #666;text-align: center;" v-else>暂无可私聊人员~</div>
						</div>
          </div>
        </div>
				<div class="slide-inner-wrap"
				     @touchmove="touchMove"
				     @touchstart="touchStart" v-if="voteObj">
					<div class="related-tab-room-wrap">
						<VoteCom :vote-obj="voteObj" :init-data="initData"/>
					</div>
				</div>
				<div class="slide-inner-wrap video-list-outer-wrap" ref="scrollOuter"  @touchmove="touchMove" @touchstart="touchStart" v-if="roompara.replay_display">
					<div class="video-list-wrap">
						<ul class="video-list-inner-wrap" v-if="showVideoList.length">
							<li class="video-item" v-for="(item,index) in showVideoList" :key="index" @click="layerReplayBox(item)">
								<a href="javascript:;" class="video-item-a">
									<div class="video-item-inner border-1px">
										<i class="video-item-play-icon"></i>
										<div class="video-item-right-content">
											<div class="video-title">{{item.replay_title}}</div>
											<div class="video-desc">{{item.replay_desc}}</div>
											<div class="video-date-wrap">
												{{item.add_time_str}}
												<div class="fr">时长:  {{item.replay_length | formatReplayLength}}</div>
											</div>
										</div>
									</div>
								</a>
							</li>
						</ul>
						<div style="margin: 10px;" v-else-if="showVideoList.length === 0 && !videoloading">当前暂无录像视频</div>
						<div class="loading" v-show="tips && showVideoList.length">全部加载完咯</div>
						<div class="loading" v-show="videoloading"><img src="@/assets/images/loading.gif" alt="" class="loading-img"/><span>玩命加载中...</span></div>
					</div>
				</div>
        <div class="slide-inner-wrap"
             v-for="(item,index) in roomTabs"
             :key="index"
             style="padding: 10px;box-sizing: border-box;"
             @touchmove="touchMove"
             @touchstart="touchStart">
          <div v-html="contentDecode(item.tab_content)"
               class="tab-content-wrap"></div>
        </div>
      </div>
    </div>
    <div class="footer border-1px"
         :class="[emojiShow ? 'emoji-move-in' : 'emoji-move-out',emojiLoad ? 'no-emoji-move' : '',isX?'ixX':'']" v-show="(activeIndex < 1 || privateParent) && !isFullscreen" ref="footer">
			<div class="menu-item-wrap" :style="itemStyleArr" ref="menuItem" :class="{'active':menuActive}">
				<div class="menu-item">
					<router-link to="/login" v-if="!user.logined">登录</router-link>
					<a href="javascript:;" @click="loginOut" v-else>退出</a>
				</div>
				<div class="menu-item" v-if="roompara.display_team_index">
					<router-link :to="`/${eng_name}`">团队</router-link>
				</div>
				<div class="menu-item" v-if="roompara.logo_op">
					<a href="javascript:" @click="goHome">首页</a>
				</div>
			</div>
			<div class="footer-inner-wrap" :class="{'no-offical-wrap':is_official}">
				<div class="chat-input-wrap">
				  <div class="chat-input-inner-wrap"><input type="text"
				           v-input
				           v-model="msg"
				           class="chat-input"
				           maxlength="99" @keyup.enter="sendMessage" ref='sendInput'></div>
				  <button class="send-btn"
				          @click="sendMessage">发送</button>
				</div>
				<div class="face-icon-wrap" @click="emojiTan">
				  <svg-icon icon-class="face"
				            style="width:2.25rem;height: 2.25rem;"></svg-icon>
				</div>
				<div @click="handleGiftClick"
				     class="mode1-icon-gift" v-if="!is_official">
				  <svg-icon icon-class="gift"
				            style="width:2.25rem;height: 2.25rem;"></svg-icon>
				</div>
				<div class="back-home-icon-wrap" @click="menuActive = !menuActive">
					<div class="icon-home" :class="{'is-open': menuActive}"></div>
				</div>
			</div>
			<!-- <div class="emoji-wrap" :class="[emojiShow ? 'emoji-move-in' : 'emoji-move-out',emojiLoad ? 'no-emoji-move' : '']"> -->
			<div class="emoji-wrap" v-overscroll-bahavior>
				<div class="emoji-inner-wrap">
					<div class="emoji-cell" v-for="(item,index) in faceAlt" :key="index">
						<img :src="faceImgArr[index]" :alt="faceAlt[index]" class="emoji-img" @click="chooseFace(faceAlt[index])">
					</div>
				</div>
			</div>
    </div>
		<div class="emoji-cover" v-show="emojiShow" @click="emojiClose"></div>
    <alert-bind-phone v-show="appDownload">
      <template #content>
        <div class="content">下载app才可以送礼！</div>
      </template>
      <template #footbtn>
        <!-- <div class="alert-bind-btn">确定</div> -->
        <div class="alert-bind-a-wrap"
             style="margin-top: 1.25rem;"><a class="alert-bind-a"
             href="javascript:;"
             style="text-decoration: underline;"
             @click="appDownload = false">关闭</a></div>
      </template>
    </alert-bind-phone>
<!-- 		<template1-private-chat :private="privateParent"
                            @choose-item="chooseItem"
                            @close="privateParent = false"
                            ref="chat"></template1-private-chat> -->
		<template1-new-private-chat :private="privateParent" @close="popupPrivateClose" ref="privateChat"></template1-new-private-chat>
    <alert-bind-phone v-if="!user.logined"
                      v-show="roompara.login_alert_time === 0 || loginDialog">
      <template #tips>
        <div class="tips-wrap">提示<i class="close-icon"
             @click="loginDialog = false"
             v-if="roompara.login_alert_time !== 0"></i></div>
      </template>
      <template #content>
        <div class="content">想观看直播,请先登录！</div>
      </template>
      <template #footbtn>
        <div class="alert-bind-btn">
          <router-link to="/login"
                       style="display: block;height: 100%;">登录</router-link>
        </div>
      </template>
    </alert-bind-phone>
    <gift></gift>
		<div class="layer-repaly-container" ref="replayContainer" v-show="replayShow" :class="{'layui-m-anim-scale':replayShow}">
			<div class="bg-cover" @click="closeLayerReplayBox"></div>
			<replay-container  ref="replay"></replay-container>
		</div>
		<template v-if="roompara.has_related_rooms && relatedRoomList.length">
			<RelatedRoom @close="relatedClose" :related-room-list="relatedRoomList" :eng-name="eng_name" v-show="relatedShow && tabClickRelatedShow"/>
		</template>
		<SendGift :gift-arr="giftArr" :class="{'active': giftShow}" @close-gift="giftShow = false" :init-data="initData"/>
  </div>
</template>

<script>
import roomDetailMixin from '@/mixins/roomDetailMixin'
import { mapGetters } from 'vuex'
import { getRoomTabs, sendMessageApi, getRoomVideoList, getRelatedRoomList, getRoomVote, handleVote  } from '@/api/room'
import micLoading from '@/components/Loading/index'
import template1Header from './components/header'
import { iosInputScroll, autoScroll, isAndroid, formatWatchServer, throttle } from '@/utils'
import { MSG_MESSAGE } from '@/utils/xchatMessageHandle'
import template1PrivateChat from './components/template1_private_chat'
import template1NewPrivateChat from './components/template1_new_private_chat'
import PlayerLoading from '@/components/playerLoading'
import input from '@/directive/input/input'
import { Base64 } from '@/utils/xchat/base64'
import ReplayContainer from '@/components/ReplayContainer'
import { openPhotoSwipe } from '@/utils/pswp'
import RelatedRoom from '@/components/RelatedRoom'
import SendGift from '@/components/SendGift'
import VoteCom from '@/components/VoteCom'
export default {
  name: 'roomTemplate1',
  components: {
    micLoading,
    template1Header,
    template1PrivateChat,
    PlayerLoading,
		ReplayContainer,
		template1NewPrivateChat,
		RelatedRoom,
		SendGift,
		VoteCom
  },
  mixins: [roomDetailMixin],
  directives: {
    input
  },
  data () {
    return {
      mode: 1,
      layoutTop: undefined,
      swiperHeight: undefined,
      videoWrapHeight: undefined,
			layoutHeight:undefined,
      roomTabs: [],
      activeIndex: 0,
      // 发送消息
      msg: '',
      sendSecond: 0,
      headerShow: false,
      isX: false,
      appDownload: false,
      // 私聊
      privateParent: false,
      selectedItem: null,
      hasPlaying: false,
      priTips: false,
      getTabLoading: false,
			//录像列表
			videolistQuery:{
				page:1,
				pageSize:20,
				room_id:this.room_id,
				eng_name:this.eng_name,
			},
			videoList:[],
			tips:false,
			videoloading:false,
			busy:true,
			replayUrl:'',
			replayShow:false,
			tabLength: 4,
			privateShow: false,
			is_official: typeof(window.is_official) !== 'undefined' ? window.is_official : false,
			menuActive: false,
			itemExpandAnimationStyle: {
			  animationName: 'menu-item-move-in',
			  animationFillMode: 'both',
			  animationDuration: '.4s',
			  animationTimingFunction: 'ease'
			},
			itemContractAnimationStyle: {
			  animationName: 'menu-item-move-out',
			  animationFillMode: 'both',
			  animationDuration: '.4s',
			  animationTimingFunction: 'ease'
			},
			itemStyleArr: [],
			isFullscreen: false,
			relatedShow: true,
			relatedRoomList: [],
			tabClickRelatedShow: true,
			voteObj: null
    }
  },
  computed: {
    ...mapGetters([
			'user',
      'privateChatMap',
      'privateChatArray'
    ]),
		showVideoList(){
			return this.videoList.filter((item) => {
				return item.is_hidden !== 1
			})
		}
  },
	filters:{
		formatReplayLength(length){
			let arr =  length.split(':').map((cur,index)=>{
				return Number(cur)>10?cur:'0'+Number(cur)
			},'')
			return arr.join(':')
		}
	},
	watch:{
		menuActive(){
			if(this.menuActive){
				try {
				  this.itemStyleArr.pop()
				} catch (e) {
				  console.log(e)
				}
				this.itemStyleArr.push(this.itemExpandAnimationStyle)
			}else{
				this.itemStyleArr.pop()
				this.itemStyleArr.push(this.itemContractAnimationStyle)
			}
		}
	},
  beforeCreate () {
    this.headerShowTimer = null
  },
  created () {
		getRoomVote(this.initData).then(res => {
			if(Object.prototype.toString.call(res.data) === '[object Object]'){
					this.voteObj = res.data
			}else{
				this.tabLength -= 1
			}
		}).catch(err => {
			console.log(err)
		})
		if(!this.roompara.replay_display){
			this.tabLength -= 1
		}else{
			this.getVideoList()
		}
		if(this.roompara.has_related_rooms){
			getRelatedRoomList({room_id: this.room_id, eng_name: this.eng_name, room_password: this.searchQuery.room_password }).then((res) => {
				this.relatedRoomList = res.data
			}).catch((err) => {
				conole.log(err)
			})
		}else{
			// this.tabLength -= 1
		}
    getRoomTabs({ room_id: parseInt(this.room_id), room_password: this.searchQuery.room_password }).then(res => {
      this.getTabLoading = true
      this.roomTabs = res.data
			this.tabLength += this.roomTabs.length
			this.$nextTick(()=>{
				Array.from(document.querySelectorAll('.tab-content-wrap img')).forEach((item)=>{
					item.addEventListener('click',function(e){
						let arr = [],src = e.target.src
						arr.push({
								src: src.replace(/(-\d+x\d+)?_size/, ""),
								w: 180,
								h: 180
						}),
						openPhotoSwipe(arr, 0)
					})
				})
			})
    }).catch(err => {
      this.getTabLoading = true
    })
  },
  methods: {
		relatedClose () {
			this.relatedShow = false
		},
    contentDecode (content) {
      return content
    },
		popupPrivate(index){
			this.privateParent = true
			this.emojiLoad = true
			this.selectedItem = this.privateChatArray[index]
			this.selectedItem.messageFlag = false
			const newMessageArr = this.privateChatArray.filter(item => item.messageFlag === true)
			if (newMessageArr.length === 0) {
			  this.priTips = false
			}
			this.$nextTick(() => {
				autoScroll(this.$refs.privateChat.$refs.chatContent)
			})
		},
		popupPrivateClose(){
			this.selectedItem = null
			this.privateParent = false
			this.msg = ''
			if(this.emojiShow){
				this.emojiClose()
			}
		},
    swiperSlide (event) {
			const liArr = [...this.$refs.tabUl.querySelectorAll('li')]
			const swiperArr = [...this.$refs.swipercontainer.querySelectorAll('.slide-inner-wrap')] 
			let current = event.currentTarget
			//必须先登录
			if(current && current.dataset && current.dataset.mustLogined){
				if (!this.user.logined) {
				  this.$router.push('/login')
				  return false
				}
			}
			const index = liArr.indexOf(current)
			liArr.forEach((item,index) => {
				item.classList.remove('select')
				swiperArr[index].classList.remove('move-in-left')
			})
			current.classList.add('select')
			swiperArr[index].classList.add('move-in-left')
			this.emojiLoad = true
			this.itemStyleArr.pop()
      if (index === 1) {
        if (!this.user.logined) {
          this.$router.push('/login')
          return false
        }
        const newMessageArr = this.privateChatArray.filter(item => item.messageFlag === true)
        if (newMessageArr.length === 0) {
          this.priTips = false
        }
        // this.privateParent = true
				current = null
      }
			if(index >= 1){
				if(this.relatedShow){
					this.tabClickRelatedShow = false
				}
			}else{
				if(this.relatedShow){
					this.tabClickRelatedShow = true
				}
			}
      this.activeIndex = index
    },
    chooseItem ({ item, newMessageArr }) {
      this.selectedItem = item
      if (Array.isArray(newMessageArr) && newMessageArr.length === 0) {
        this.priTips = false
      }
    },
    sendMessage () {
      if (!this.user.logined) {
        this.$router.push('/login')
        return false
      }
      if (!this.xmessager.logined) {
        this.$layer.open({
          content: '聊天服务器已断开连接,请刷新或退出房间重试!',
          skin: 'msg',
          time: 2 // 2秒后自动关闭
        })
        return false
      }
      if (this.activeIndex === 1 && !this.selectedItem || this.activeIndex === 1 && this.privateChatArray.length === 0) {
        this.$layer.open({
          content: '当前私聊列表暂无人员，不可以进行私聊！',
          skin: 'msg',
          time: 2 // 2秒后自动关闭
        })
        return false
      }
      if (this.msg === '') {
        this.$layer.open({
          content: '发送内容不能为空!',
          skin: 'msg',
          time: 2 // 2秒后自动关闭
        })
        return false
      }
      if (this.xmessager.chatdisable > 0) {
        this.$layer.open({
          content: '你目前处于禁止发言状态，不能发言！',
          skin: 'msg',
          time: 2 // 2秒后自动关闭
        })
        return false
      }
      if (this.sendSecond === 0) {
        let to_u = null
        if (this.activeIndex === 1 && this.selectedItem) {
          to_u = this.selectedItem
        }
        let secret = false
        let UserSelectedUid = 0
        if (to_u) {
          secret = true
          UserSelectedUid = to_u.uid
        }
        const to_room_id = to_u && to_u.appdata ? to_u.appdata.room_id : +this.room_id
        const index = this.$layer.open({
          type: 2,
          content: '发送中...'
        })
        sendMessageApi({ _token: this.token, to_room_id, room_id: this.roompara.room_id, secret, to_uid: UserSelectedUid, message: this.msg, room_password: this.searchQuery.room_password }).then(res => {
          if (res.code === 0) {
						let sendInter = setInterval(() => {
						  this.sendSecond++
						  if (this.sendSecond === 4) {
						    clearInterval(sendInter)
						    sendInter = null
						    this.sendSecond = 0
						  }
						}, 1000)
            this.$layer.close(index)
						this.messageHandler(this.generateChatdata({secret, msg_id: res.data.msg_id, message: this.msg,to_uid: UserSelectedUid}),false)
            this.msg = ''
          }
        }).catch(err => {
					// this.$refs.sendInput.blur()
					// if(isAndroid){
					// 	document.documentElement.style.height = window.innerHeight + 'px'
					// }
          this.$layer.close(index)
        })
      } else {
				// this.$refs.sendInput.blur()
				// if(isAndroid){
				// 	document.documentElement.style.height = window.innerHeight + 'px'
				// }
        this.$layer.open({
          content: `发送消息太快了，请稍等${4 - this.sendSecond}秒`,
          skin: 'msg',
          time: 2 // 2秒后自动关闭
        })
        return false
      }
    },
    caculateHeight () {
      this.height = window.innerHeight
      this.videoWrapHeight = window.innerWidth / 16 * 9
      this.$nextTick(() => {
        this.layoutTop = this.$refs.videoBoX.getBoundingClientRect().height
        this.layoutHeight = window.innerHeight - this.$refs.videoBoX.getBoundingClientRect().height
      })
    },
		messageHandler(chatdata,manual = true){
			if(chatdata.type === 'C' && (this.xmessager.uid === chatdata.data.from_uid) && manual){
				return false
			}
			if(chatdata.type === 'G' && 'gift_thumb_img_v3' in chatdata.data) {
				chatdata.data.gift_thumb_img_v3 = `${this.roompara.show_url}${chatdata.data.gift_thumb_img_v3}`
			}
			MSG_MESSAGE(chatdata, { chatDisplay: this.chatDisplay, roompara: this.roompara, xmessager: this.xmessager, store: this.$store, chat: this.chat, header: this, mode: 1 })
			if (chatdata.data.secret) {
				if (this.activeIndex !== 1 || this.activeIndex === 1 && (!this.selectedItem || this.selectedItem && chatdata.data.from_uid != this.selectedItem.uid && chatdata.data.from_uid != this.xmessager.uid)) {
					this.priTips = true
				}
				this.$nextTick(() => {
					autoScroll(this.$refs.privateChat.$refs.chatContent)
				})
			}
		},
		generateChatdata({message, secret, msg_id, to_uid}){
			const chatdata = {}
			chatdata.type = 'C'
			chatdata.data = {
				from_uid: this.xmessager.uid,
				frid: this.xmessager.room_id,
				from_room_id: this.xmessager.room_id,
				message,
				from_nickname: '我',
				from_level: this.xmessager.level,
				levelinroom: this.xmessager.level,
				secret,
				title: this.xmessager.appdata.title,
				msg_id,
				to_uid
			}
			return chatdata
		},
		shangmaiHandler({ url_data, mictime }){
			this.initPlayer(url_data,false,true,0,5000).then((player)=>{
				this.fullScreenPlayer = player
				this.fullScreenPlayer.mictime = mictime
				this.playerEvents()
			})
		},
		xiamaiHandler(){
			if (this.fullScreenPlayer) {
				this.destroyPlayer()
			  this.offPlayerEvents()
				this.fullScreenPlayer = null
			}
		},
    chatEvents () {
      this.chat.on(this.chat.chatEvents.MSG_MESSAGE, this.messageHandler)
      this.chat.on(this.chat.chatEvents.SHANGMAI, this.shangmaiHandler)
      this.chat.on(this.chat.chatEvents.XIAMAI, this.xiamaiHandler)
    },
    offChatEvents () {
			this.chat.off(this.chat.chatEvents.MSG_MESSAGE, this.messageHandler)
			this.chat.off(this.chat.chatEvents.SHANGMAI, this.shangmaiHandler)
			this.chat.off(this.chat.chatEvents.XIAMAI, this.xiamaiHandler)
    },
		nativePlayerPlayHandler(){
			this.hasPlaying = true
			if (isAndroid) {
			  setTimeout(() => {
			    this.caculateHeight()
			  }, 500)
			}
		},
		nativePlayerPauseHandler(){
			this.hasPlaying = false
			this.headerShow = false
		},
		flvErrorHandler(){
			this.headerShow = false
			this.destroyPlayer()
			this.offPlayerEvents()
			this.fullScreenPlayer = this.initPlayer(this.watchServer, true, false)
			this.openHls = true
			this.playerEvents()
		},
		clickHandler(){
			this.headerIsShow()
		},
		fullscreenHandler(){
			this.isFullscreen = !this.isFullscreen
			this.itemStyleArr.pop()
		},
    playerEvents () {
      this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.NATIVE_PLAYER_PLAY, this.nativePlayerPlayHandler)
      this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.NATIVE_PLAYER_PAUSE, this.nativePlayerPauseHandler)
      this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.FLV_ERROR, this.flvErrorHandler)
      this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.H5_PLAYER_CLICK, this.clickHandler)
			this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.H5_PLAYER_FULLSCREEN, this.fullscreenHandler)
			this.fullScreenPlayer.on(this.fullScreenPlayer.playerEvents.H5_PLAYER_ORIENTATIONCHANGE, this.fullscreenHandler)
    },
    offPlayerEvents () {
      this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.NATIVE_PLAYER_PLAY, this.nativePlayerPlayHandler)
      this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.NATIVE_PLAYER_PAUSE, this.nativePlayerPauseHandler)
      this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.FLV_ERROR, this.flvErrorHandler)
      this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.H5_PLAYER_CLICK, this.clickHandler)
			this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.H5_PLAYER_FULLSCREEN, this.fullscreenHandler)
			this.fullScreenPlayer.off(this.fullScreenPlayer.playerEvents.H5_PLAYER_ORIENTATIONCHANGE, this.fullscreenHandler)
    },
    downloadApp () {
      if (!this.user.logined) {
        this.$router.push('/login')
        return false
      }
      this.appDownload = true
    },
		handleGiftClick() {
			if (!this.user.logined) {
			  this.$router.push('/login')
			  return false
			}
			this.giftShow = true
		},
    headerIsShow () {
      if (this.headerShowTimer) {
        clearTimeout(this.headerShowTimer)
        this.headerShowTimer = null
      }
      this.headerShow = !this.headerShow
      if (this.headerShow) {
        this.headerShowTimer = setTimeout(() => {
          this.headerShow = false
        }, 4000)
      }
    },
    backHome () {
      this.$router.push(`/${this.searchQuery.eng_name}`)
    },
    judgeOnorientation () {
      const width = document.documentElement.clientWidth; const height = document.documentElement.clientHeight
      if (width >= height) {
        document.documentElement.classList.remove('portrait')
        document.documentElement.classList.add('landscape')
      } else {
        document.documentElement.classList.remove('landscape')
        document.documentElement.classList.add('portrait')
      }
    },
    touchStart (e) {
      this.firstY = e.targetTouches[0].clientY;
    },
    touchMove (e) {
      let target = e.currentTarget
      let offsetHeight = target.offsetHeight, scrollHeight = target.scrollHeight
      let changedTouches = e.changedTouches
      let scrollTop = target.scrollTop
      if (changedTouches.length > 0) {
        let touch = changedTouches[0] || {}
        let moveY = touch.clientY
        if (moveY > this.firstY && scrollTop === 0) {
          // 滑动到弹窗顶部临界条件
          e.preventDefault()
          return false
        } else if (moveY < this.firstY && scrollTop + offsetHeight >= scrollHeight) {
          // 滑动到底部临界条件
          e.preventDefault()
          return false
        }
      }
    },
		handleOrientationchange(){
			setTimeout(() => {
			  this.height = window.innerHeight
			  this.judgeOnorientation()
			  this.caculateHeight()
			}, 200)
		},
		loadMoreVideoList(){
			if(this.$refs.scrollOuter.scrollTop + window.innerHeight >= this.$refs.scrollOuter.scrollHeight - 40 && !this.videoloading && !this.tips){
				this.getVideoList()
			}
		},
		getVideoList(){
			this.videoloading = true
			this.tips = false
			this.videolistQuery.room_password = this.searchQuery.room_password
			getRoomVideoList(this.videolistQuery).then(res=>{
				this.videoloading = false
				this.videolistQuery.page++
				this.videoList.push(...res.data.data)
				if(res.data.data.length !== 20){
					this.tips = true
				}
			}).catch(err=>{
				this.videoloading = false
			})
		},
		layerReplayBox(item){
			this.replayShow = true
			if(this.fullScreenPlayer){
				this.fullScreenPlayer.destroy()
				this.offPlayerEvents()
				this.fullScreenPlayer = null
			}
			this.$nextTick(()=>{
				this.$refs.replay.initDplayer(`${item.server_url}${item.replay_url}`)
			})
		},
		closeLayerReplayBox(){
			this.$refs.replay.destroyPlayer()
			if(this.watchServer.length){
				this.fullScreenPlayer = this.initPlayer(this.watchServer, this.openHls, false, this.currentIndex)
				this.playerEvents()
			}
			this.replayShow = false
		},
		chooseFace(content){
			this.msg = this.msg + content
		},
		visibilityChangeHandler(){
			if (document.hidden || document.visibilityState === 'hidden') {
				if(this.fullScreenPlayer){
					this.currentIndex = this.fullScreenPlayer.currentHlsIndex
					this.fullScreenPlayer.destroy()
					this.offPlayerEvents()
					this.fullScreenPlayer = null 
				}
			}else{
				if(this.watchServer.length){
					this.fullScreenPlayer = this.initPlayer(this.watchServer, this.openHls, false, this.currentIndex)
					this.playerEvents()
				}
			}
		},
		goHome(){
			window.location.href = '/'
		}
  },
  mounted () {
		this.footerHeight = this.$refs.footer.getBoundingClientRect().height
		let vm = this
		document.documentElement.classList.add('fixed')
		document.body.classList.add('fixed')
    this.caculateHeight()
    this.judgeOnorientation()
    window.addEventListener('orientationchange',this.handleOrientationchange)
		if(this.roompara.replay_display){
			this.videoScroll = throttle(this.loadMoreVideoList,500,{ begin:true, end:true})
			if(this.$refs.scrollOuter){
				this.$refs.scrollOuter.addEventListener('scroll',this.videoScroll)
			}
		}
		document.addEventListener('visibilitychange', this.visibilityChangeHandler)
  },
	beforeDestroy () {
		document.removeEventListener('visibilitychange', this.visibilityChangeHandler)
		document.documentElement.classList.remove('fixed')
		document.body.classList.remove('fixed')
    if (this.fullScreenPlayer) {
      this.fullScreenPlayer.destroy()
      this.offPlayerEvents()
    }
    if (this.chat) {
      this.offChatEvents()
    }
    this.fullScreenPlayer = null
    this.chat = null
    clearInterval(this.loginTimer)
    this.loginTimer = null
    clearTimeout(this.headerShowTimer)
    this.headerShowTimer = null
    window.removeEventListener('orientationchange',this.handleOrientationchange)
		if(this.roompara.replay_display && this.$refs.scrollOuter){
			this.$refs.scrollOuter.removeEventListener('scroll',this.videoScroll)
		}
  }
}
</script>
<style lang="scss" scoped>
	.chat-scroll-wrap{
		height: 100%;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.swiper-outer-wrap{
		flex: 1;
	}
.layout_main{
	display: flex;
	flex-direction: column;
	bottom: 52px;
}
.layout_main.other{
	bottom: 0;
}
.private-inline-list-wrap{
	margin: 0 1.12rem;
	 font-size: 0.87rem;
	.tempalte1-private-chat-li{
		height: 3rem;
		line-height: 3rem;
		@include border-1px;
		a{
			position: relative;
			display: block;
			height: 100%;
		}
		a.active{
			color:#4360F0 ;
		}
		.private-icon{
			position: absolute;
			top:0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 2.43rem;
			height: 1.12rem;
			background: url(../../../../assets/images/private-icon.png) no-repeat;
			background-size:contain;
			&.has-new-message::after{
				content: '';
				position: absolute;
				width:8px;
				height: 8px;
				border-radius: 50%;
				background-color: red;
				right:0;
			}
		}
	}
}
.template1-room-wrap {
  .footer {
		.menu-item-wrap{
			position: absolute;
			width: 2.25rem;
			top: 0;
			right: .5rem;
			opacity: 0;
			&.active{
				opacity: 1;
				transform: translateY(-100%);
			}
			.menu-item{
				height: 2.25rem;
				margin-bottom: 0.62rem;
				line-height: 2.25rem;
				text-align: center;
				border-radius: 50%;
				background-color: #4360F0;
				box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
			}
			a{
				display: block;
				height: 100%;
				font-size: 0.75rem;
				color: #fff;
			}
		}
    background-color: #fff;
		border: 0 none;
		transform: translateY(0);
		&.emoji-show{
			transform: translateY(-12.5rem);
		}
		.footer-inner-wrap{
			position: relative;
			height: 52px;
			line-height: 52px;
			z-index: 21;
			background-color: #fff;
			&.no-offical-wrap{
				.chat-input-inner-wrap{
					width: 13.5rem !important;
				}
				.face-icon-wrap{
					right: 3.2rem !important;
				}
			}
		}
		&::before{
			display: block;
			position: absolute;
			left: 0;
			top: -1px;
			width: 100%;
			border-top: 1px solid #ddd;
			content: '';
		}
    .chat-input-wrap {
      position: absolute;
      top: 50%;
      left: .5rem;
      display: flex;
      transform: translateY(-50%);
      align-items: center;
      .chat-input-inner-wrap {
        width: 10.5rem;
        height: 33px;
        flex: 1;
        border-radius: 100px 0 0 100px;
        border: 1px solid #dfdfdf;
        border-right: none;
        .chat-input {
          width: 100%;
          padding-left: 15px;
          height: 100%;
          line-height: 33px;
          box-sizing: border-box;
          background-color: transparent;
          vertical-align: top;
        }
      }
      .send-btn {
        height: 35px;
        width: 3.12rem;
        background: #4360f0;
        border: 0 none;
        border-radius: 0 100px 100px 0;
        color: #fff;
        line-height: 35px;
        font-size: 0.75rem;
      }
    }
		.face-icon-wrap,
    .mode1-icon-gift,
    .back-home-icon-wrap {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 2.25rem;
      height: 2.25rem;
      margin: auto;
			.icon-home{
				position: relative;
				height: 100%;
				border-radius: 50%;
				background-color: #4360F0;
				transition: transform .25s;
				will-change: tranform;
				z-index: 1;
				&.is-open{
					transform: rotate(45deg);
				}
				&::after,&::before{
					content: '';
					position: absolute;
					top: 0;
					bottom: 0;
					left: 0;
					right: 0;
					width: 15px;
					height: 0;
					margin: auto;
					border-top: 2px solid #fff;
				}
				&::before{
					transform: rotate(90deg);
				}
			}
    }
		.face-icon-wrap{
			right: 6.2rem;
		}
		.mode1-icon-gift{
			right: 3.3rem;
		}
    .back-home-icon-wrap {
      right: .5rem;
    }
		@include face-style;
  }
  .footer.isX {
    padding-bottom: 30px;
    .chat-input-wrap {
      top: 10px;
      transform: translateY(0);
    }
  }
	.video-list-wrap{
		.video-item{
			.video-item-a{
				display: block;
				padding: 0.62rem 0;
				background-color:#fff;
				.video-item-inner{
					position: relative;
					@include border-1px;
					margin: 0 1rem;
					&::before{
						bottom: -0.62rem;
					}
					.video-item-play-icon{
						position: absolute;
						width: 1rem;
						height: 1rem;
						top: 50%;
						transform: translateY(-50%);
						@include setFixedBackground('../../../../assets/images/icon-video-play@2x.png');
					}
					.video-item-right-content{
						padding-left: 1.87rem;
						overflow: hidden;
						.video-title{
							font-size: 0.93rem;
							color: #222;
							font-weight: 600;
						}
						.video-desc{
							display: -webkit-box;
							overflow: hidden;       
							text-overflow: ellipsis;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							margin: 3px 0;
							font-size: 0.87rem;
							color: #222;
						}
						.video-date-wrap{
							color: #666;
							font-size: 0.75rem;
						}
					}
				}
			}
		}
	}
	.loading{
		padding: 0.62rem 0;
		font-size: 0.87rem;
		color: #000;
		text-align: center;
		.loading-img{
			width: 1.25rem;
			height: 1.25rem;
			margin-right: 0.62rem;
			vertical-align: middle;
		}
	}
	.layer-repaly-container{
		position: fixed;
		top: 0;
		bottom: 0;
		right: 0;
		left: 0;
		z-index: 19930903;
		animation-duration: .2s;
		animation-fill-mode: both;
		.bg-cover{
			background-color: black;
		}
	}
}
.no-live {
  .no-live-innerwrap {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
  }
}
.landscape {
  .video-box {
    .no-live,
    .h5-player-loading-wrap {
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }
  }
}
	/*关联房间*/
	.related-tab-room-wrap{
		padding: 0.75rem 0.625rem 0;
		.related-room-ul{
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
		}
		.related-room-li{
			margin-bottom: 1rem;
		}
		.related-room-li a{
			display: block;
			width: 10.5rem;
			border: 1px solid #ddd;
			box-sizing: border-box;
		}
		.related-room-img{
			display: block;
			width: 100%;
		}
		.related-room-desc{
			margin-left: 0.5625rem;
			line-height: 2.125rem;
		}
	}
</style>
<style scoped>
	.barrage-tip{
		position: absolute;
		left: 50%;
		bottom: 2rem;
		padding: 0.3125rem 0.625rem;
		background-color: #4360F0;
		border-radius: 0.3125rem;
		transform: translateX(-50%);
		color: #fff;
		box-shadow:  0 0 5px rgba(0, 0, 0, .8);
		opacity: 0;
		visibility: hidden;
		transition: opacity .25s, visibility .25s;
	}
	.barrage-tip.show{
		opacity: 1;
		visibility: visible;
	}
.emoji-cover{
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background-color: transparent;
}
.template1-room-wrap >>> .dplayer-full{
	display: none;
}
.template1-room-wrap {
/* 	position: absolute;
	top: 0;
	left: 0;
	right: 0;
  overflow: hidden; */
}
.template1-room-wrap .room-detail-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  transform: translateY(-100%);
  transition: transform 0.25s;
}
.template1-room-wrap .room-detail-header.active {
  transform: translateY(0);
}
.video-box .no-live {
  top: 0;
  bottom: 0;
  width: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  background-color: #24231d;
}
.nav_box {
  position: relative;
  height: 42px;
}
.nav_box ul {
  overflow: hidden;
  white-space: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font-size: 0px;
}
.nav_box ul li {
  position: relative;
  line-height: 42px;
  display: inline-block;
  width: calc((100vw - 20px) / 3 - 10px);
  text-align: center;
  font-size: 14px;
  color: #232323;
  padding: 0 5px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-user-select: none;
}
.nav_box ul li.li-length-2{
	width: calc((100vw) / 2);
}
.nav_box ul li.li-length-3{
	width: calc((100vw) / 3);
}
.nav_box ul li.li-length-n{
	width: calc((100vw - 20px) / 3 - 10px);
}
.nav_box ul .tab-hinter {
  position: absolute;
  width: calc((100vw - 20px) / 3 - 10px);
  left: 0;
  bottom: 0;
  transition: all 0.4s cubic-bezier(0.22, 0.58, 0.12, 0.98);
}
.nav_box ul .tab-hinter div {
  width: 5rem;
  border-bottom: 2px solid #4360f0;
  margin: auto;
}
.nav_box ul li a::after {
  content: '';
  position: absolute;
  left: -10px;
  right: -10px;
  bottom: 0;
  border-bottom: 2px solid transparent;
}
.nav_box ul li a {
  position: relative;
  display: inline-block;
  height: 100%;
  color: #232323;
}
.nav_box ul li a.siliao.active::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  background-color: #f10905;
  border-radius: 50%;
  right: -8px;
  top: 12px;
}
.nav_box li.select a {
  color: #4360f0;
}
.nav_box li.select a::after {
  border-bottom: 2px solid #4360f0;
}
.nav_box::before {
  position: absolute;
  content: '';
  border-top: 1px solid #ddd;
  bottom: 0;
  right: 0;
  left: 0;
}
.footer {
  position: absolute;
  width: 100%;
  background-color: #fff;
  bottom: 0;
  z-index: 14;
}
.toolbar {
  width: 100%;
  overflow: hidden;
  padding: 3px 0;
}
.smile,
.gift {
  position: relative;
  height: 25px;
  width: 25px;
  margin: 5px 0px 5px 10px;
}
.gift {
  background: transparent url(./images/newversion_chat.png) no-repeat;
  background-size: contain;
}
.gift.active {
  background: url(./images/newversion_chat_active.png) center center no-repeat;
  background-size: contain;
}
.messageEditor {
  padding-left: 10px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #cbcbcb;
  border-radius: 3px;
  overflow: hidden;
  outline: none;
  margin: 1.5px 13px;
}
.sendMessage {
  color: #fff;
  height: 35px;
  line-height: 35px;
  width: 60px;
  text-align: center;
  background: #0e90ff;
  border-radius: 3px;
  margin-right: 3px;
}
/*私聊*/
.prv_dialog {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 44px;
  left: 0;
  z-index: 2;
  visibility: hidden;
  overflow: hidden;
  transition: visibility 0.25s;
}
.prv_dialog .pri_area {
  position: absolute;
  bottom: 0;
  width: 100%;
  transform: translateY(100%);
  -webkit-transition: transform 0.15s;
}
.prv_dialog .prv_chat {
  font-size: 12px;
  color: #f1f1f1;
  background: #1f3b57;
  padding: 8px 50px;
}
.prv_dialog .pri_area .selectModel {
  display: inline-block;
  position: relative;
  font-size: 16px;
}
.prv_dialog .pri_area #message_to {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  width: 170%;
}
.prv_dialog.active {
  visibility: visible;
  transition: none;
}
.prv_dialog.active .tab_cover {
  opacity: 0.6;
}
.prv_dialog.active .pri_area {
  transform: translateY(0);
}
.pri_area_close {
  position: absolute;
  width: 20px;
  height: 20px;
  background: url(./images/pri-close.png) no-repeat;
  background-size: contain;
  top: 10px;
  right: 10px;
  z-index: 19940903;
}
.template1-room-wrap >>> .message span {
  line-height: 18px;
  color: #333;
}
.template1-room-wrap >>> .message .group {
  background: #09b472;
  color: #fff;
  padding: 2px 5px;
  font-size: 0.8em;
  margin-right: 5px;
  border-radius: 2px;
}
.template1-room-wrap >>> .message span.chat_area {
  margin-left: 3px;
}
.template1-room-wrap >>> .message .nikename {
  color: #4360f0;
}
.template1-room-wrap >>> .message img {
  vertical-align: top;
}
.template1-room-wrap >>> .message img.chat_load_img{
	display: block;
}
.template1-room-wrap >>> .message {
  margin: 10px;
  word-break: break-all;
}
.template1-room-wrap >>> .message .moreMessage {
  color: #4360f0;
  cursor: pointer;
}
</style>
<style>
.fixed{
	position: fixed;
	left: 0;
	right: 0;
}
.content-wrap .content.zan_content img {
  width: auto;
}
.template1-room-wrap .message.system_message .chat_user {
  color: #efba35;
}
.prv_dialog li {
  color: #fff;
  font-size: 14px;
}
.prv_dialog .prv_wrap {
  padding: 20px 16px;
  height: 145px;
  background: rgba(56, 73, 89, 0.6);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.prv_dialog .me,
.prv_dialog .nickname {
  font-size: 14px;
  color: #2387dc;
  word-break: break-all;
  margin: 0 5px;
}
.prv_dialog .time {
  font-size: 12px;
  color: #a1a1a1;
}
.prv_dialog .chat_content {
  font-size: 14px;
}
.swiper-container,
.swiper-wrapper,
.swiper-slide {
  height: 100%;
}
.swiper-slide {
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
}
.warning {
  color: #ed4259 !important;
}
.tab-content-wrap {
  line-height: 1.8;
  color: rgba(0, 0, 0, 0.8);
  word-break: break-all;
}
.tab-content-wrap img {
  max-width: 100%;
  display: block;
  height: auto;
  margin: 7px auto;
}
.tab-content-wrap img.lazy {
  width: 100%;
  height: 200px;
}
.tab-content-wrap a {
  color: #1478f0;
}
.tab-content-wrap p {
  line-height: 1.8;
}
.tab-content-wrap h2 {
  border-left: 4px solid;
  padding-left: 8px;
  line-height: 1.2;
  font-size: 20px;
  margin: 10px 0;
}
.tab-content-wrap h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 10px 0;
  line-height: 1.6;
  padding-bottom: 5px;
  border-bottom: 1px solid #e9e9e9;
}
.tab-content-wrap blockquote {
  background-color: #fafafa;
  border: 1px solid #eee;
  border-left-width: 8px;
  padding: 10px 20px;
  color: #333;
  margin-bottom: 20px;
}
.tab-content-wrap table {
  word-wrap: break-word;
  word-break: break-all;
  max-width: 100%;
  border: none;
  border-color: #999;
}
.template1-room-wrap .h5-player-loading-wrap .loading-inner-wrap {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}
@keyframes move-in-left {
  0% {
    opacity: 0;
    -webkit-transform: translate(5em);
    transform: translate(5em);
  }

  to {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes move-in-right {
  0% {
    opacity: 1;
    -webkit-transform: translate(0);
    transform: translate(0);
  }

  to {
    opacity: 0;
    -webkit-transform: translate(5em);
    transform: translate(5em);
  }
}
.slide-inner-wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  transform: translate(0);
  display: none;
}
.move-in-left {
  display: block;
  animation: move-in-left cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s;
}
.move-in-right {
  display: none;
  animation: move-in-right cubic-bezier(0.22, 0.58, 0.12, 0.98) 0.4s;
}
</style>
